<script setup lang="ts">
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css';
import 'swiper/css/navigation';
import {Autoplay, Pagination} from "swiper/modules";


const modules = [Autoplay, Pagination]
// 卡片数据
const cardList = ref([
  {
    img: 'path/to/image1.jpg',
    title: '第三方医学检验服务',
    desc: 'medical testing services',
    iconClass: 'icon-medical'
  },
  {
    img: 'path/to/image2.jpg',
    title: '整体解决方案',
    desc: 'Overall Solution',
    iconClass: 'icon-solution'
  },
  {
    img: 'path/to/image2.jpg',
    title: '科研服务',
    desc: 'Overall Solution',
    iconClass: 'icon-solution'
  },
  {
    img: 'path/to/image2.jpg',
    title: '试剂',
    desc: 'Overall Solution',
    iconClass: 'icon-solution'
  },
  {
    img: 'path/to/image2.jpg',
    title: '仪器',
    desc: 'Overall Solution',
    iconClass: 'icon-solution'
  },
  {
    img: 'path/to/image2.jpg',
    title: '基因检测服务',
    desc: 'Overall Solution',
    iconClass: 'icon-solution'
  },
  // 其他卡片数据...
]);

// Swiper 配置
const swiperOptions = ref({
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  slidesPerView: 3,
  spaceBetween: 20,
  loop: true, // 循环切换
  speed: 500 // 切换速度
});

const navigation =ref({
  enabled: true,
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev'
});

</script>

<template>
  <div class="swiper-container">
    <div class="title">产品中心</div>
    <div class="sub_title">PRODUCT CENTER</div>
    <div class="line"></div>
    <Swiper
        :modules="modules"
        :options="swiperOptions"
        :slidesPerView=5
        :spaceBetween=50
        :navigation="navigation"
        :pagination="{ clickable: true }"
        :parallax=true
        :zoom=true
        class="swiper-style"
    >
      <SwiperSlide v-for="(item, index) in cardList" :key="index" class="card-offset" >
        <div class="card">
<!--          <img :src="item.img" :alt="item.title" class="card-img" />-->
          <div class="card-text">
            <i :class="item.iconClass"></i>
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<style scoped lang="scss">

.title {
  font-size: 3rem;
  text-align: center;
}
.sub_title {
  font-size: 1rem;
  text-align: center;
}
.line {
  width: 30px;
  height: 2px;
  background-color: red;
  margin: 0 auto;
}
.swiper-container {
  width: 100%;
  padding-top: 20px;
  .swiper-style{
    height: 300px;
  }
}

.card-offset {
  //&.swiper-slide {
  //  transform: translateZ(0px) rotateY(50deg); /* 奇数卡片额外旋转和偏移 */
  //  background-color: #00ff33;
  //}
  background-color: #00ff33;
  //::v-deep.swiper-slide {
  //  transition: transform 0.5s ease;
  //  backface-visibility: hidden;
  //  transform-origin: center center;
  //}
  //::v-deep.swiper-slide:nth-child(3) {
  //  transform: rotateY(0deg);
  //}
  //::v-deep.swiper-slide:nth-child(1),::v-deep.swiper-slide:nth-child(2){
  //  transform: rotateY(-50deg);
  //}
  //::v-deep.swiper-slide:nth-child(4),::v-deep.swiper-slide:nth-child(5){
  //  transform: rotateY(50deg);
  //}
  //::v-deep.swiper-slide:nth-child(n):not(:nth-child(3)) {
  //  transform: rotateY(50deg) scale(0.5);
  //}
}







.card {
  height: 90%;
  width: calc((100% - 10px));
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s;
  position: relative;
  transform: translateZ(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  //padding: 0 10%;
  margin-top: 10px;
  margin-bottom: 10px;

  .card-img {
    width: 100%;
    height: auto;
  }

  .card-text {
    padding: 15px;
    text-align: center;

    i {
      font-size: 24px;
      display: block;
      margin-bottom: 10px;
    }

    h3 {
      font-size: 18px;
      margin-bottom: 5px;
    }

    p {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>